<template>
  <div class="top">
    <div class="bgImg">
      <img :src="playList.coverImgUrl" alt="" />
      <p class="p1">云音乐</p>
      <p class="p2">更新日期：{{ playList.createTime | formateTime }}</p>
      <div class="list">
        <SongList
          v-if="showList"
          :songs="showList"
          :showNum="showNumber"
          @play="$emit('play', $event)"
        ></SongList>
        <Loading v-if="showList.length==0"></Loading>
      </div>
      <span class="loadeMore" @click="loadeMore">加载更多>></span>
    </div>
  </div>
</template>
<script>
import Loading from "@/components/Loading";
import SongList from "@/components/SongList";
export default {
  name: "DetailList",
  data() {
    return {
      hotList: [],
      showList: [],
      showNumber: true,
      playList: [],
      limit: 20,
    };
  },
  created() {
    this.$http.get("/playlist/detail?id=3778678").then((dlist) => {
      this.playList = dlist.data.playlist;
      console.log(this.playList.createTim);
      // console.log(this.plsayList);
      this.hotList = dlist.data.playlist.tracks.map((d, index) => {
        let data = d;
        data.song = {
          artists: d.ar,
          privilege: {
            playMaxbr: dlist.data.privileges[index].playMaxbr,
          },
        };
        return data;
      });
      this.showList = this.hotList.slice(0, this.limit);
    });
  },
  methods: {
    loadeMore() {
      let num = this.showList.length + this.limit;
      this.showList = this.hotList.slice(0, num);
    },
  },
  filters: {
    formateTime(val) {
      let d = new Date(val);
      return d.getMonth() + 1 + "月" + d.getDate() + "日";
    },
  },
  components: {
    SongList,
    Loading
  },
};
</script>
<style lang="less" scoped>
.top {
  .bgImg {
    height: 200px;
    img {
      width: 100%;
      height: 200px;
      // border-radius: 0 0 20px 20px;
    }
    p {
      position: absolute;
      top: 150px;
      left: 50%;
      transform: translatex(-50%);
      color: hsla(0, 0%, 100%, 0.8);
    }
    .p2 {
      position: absolute;
      top: 224px;
    }
  }
  .list {
    position: relative;
    ul {
      border-radius: 20px 20px 0 0;
      margin-top: -24px;
    }
  }
  .loadeMore{
    display: block;
    height: 20px;
    line-height: 20px;
    background:linear-gradient(to top, rgb(126, 204, 166) 20%, rgba(255, 0, 0, 0)100%);
    text-align: center;
    color: #7a7979;
  }
}
</style>